import { Button, Col, Row, Space } from 'antd';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { useContext } from 'react';
import { ScheduleContext } from '../SchContext';
import moment from 'moment';

const TableHeader = () => {
  const ctx = useContext(ScheduleContext);
  return (
    <Row justify="space-between" gutter={[24, 12]}>
      <Col
        xl={18} sm={16} xs={24}
        style={{
          display: 'flex',
          justifyContent: 'center',
        }}
      >
        {ctx.dateUnit !== 'LIST' && (
          <Space>
            <Button onClick={ctx.onPrev} icon={<LeftOutlined />} />
            <span>
              {' '}
              {ctx.dateUnit === 'WEEK'
                ? `第${moment(ctx.beginTime).format('WW')}周`
                : ctx.dateUnit === 'MONTH'
                  ? moment(ctx.beginTime).format('MMMM')
                  : moment(ctx.beginTime).format('YYYY-MM-DD')}
            </span>
            <Button onClick={ctx.onNext} icon={<RightOutlined />} />
            <Button onClick={ctx.onReset}>
              {ctx.dateUnit === 'WEEK' ? '本周' : ctx.dateUnit === 'MONTH' ? '本月' : '今天'}
            </Button>
          </Space>
        )}
      </Col>
      <Col xl={6} sm={8} xs={24} style={{
        display: 'flex',
        justifyContent: 'flex-end',
      }}>
        <Button.Group>
          <Button
            type={ctx.dateUnit === 'LIST' ? 'primary' : undefined}
            onClick={() => ctx.setDateUnit('LIST')}
          >
            列表
          </Button>
          <Button
            type={ctx.dateUnit === 'DAY' ? 'primary' : undefined}
            onClick={() => ctx.setDateUnit('DAY')}
          >
            日
          </Button>
          <Button
            type={ctx.dateUnit === 'WEEK' ? 'primary' : undefined}
            onClick={() => ctx.setDateUnit('WEEK')}
          >
            周
          </Button>
          <Button
            type={ctx.dateUnit === 'MONTH' ? 'primary' : undefined}
            onClick={() => ctx.setDateUnit('MONTH')}
          >
            月
          </Button>
        </Button.Group>
      </Col>
    </Row>
  );
};

export default TableHeader;
